<template>
	<view class="reminder">
		<view class="reminder-box">
			<view class="title">{{title}}</view>
			<view class="value">{{value}}
				<text style="color: #004098;" v-if="file"
					@click="checkAgreement('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/pdf/meet.pdf', file)">{{file}}
				</text>
			</view>
			<view class="value value2" v-if="value2">{{value2}}</view>
			<slot></slot>
		</view>
		<image class="reminder-image" :src="image" mode="widthFix"></image>
		<view class="close" v-if="close" @tap="closePop"><text class="dy-iconfont icon-a-bianzu69"></text></view>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	export default {
		name: 'reminder',
		props: {
			value: {
				type: String,
				default: ''
			},
			value2: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			image: {
				type: String,
				default: 'https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/empty/tc1.png'
			},
			file: {
				type: String,
				default: ''
			},
			close: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {

			};
		},
		created() {},
		methods: {
			closePop() {
				this.$emit('closePop')
			},
			checkAgreement(url, name) {
				let that = this;
				that.$refs.toast.show({
					type: 'loading',
				})
				wx.downloadFile({
					url: url, //文件地址
					success(res) {
						wx.saveFile({ //重点 wx.saveFile一定要有   避免文件存储找不到  然后打开失败
							tempFilePath: res.tempFilePath,
							filePath: wx.env.USER_DATA_PATH + '/' + name + '.pdf',
							success(res) {
								wx.openDocument({
									filePath: res.savedFilePath,
									fileType: "pdf",
									showMenu: true,
									success: function(res) {
										that.$refs.toast.hide()
									},
									fail: function(res) {
										that.$refs.toast.hide()
									},
								})
							}
						})
					},
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.reminder {
		position: relative;
		box-sizing: border-box;
		padding-top: 70rpx;
		z-index: 3;

		.reminder-image {
			width: 320rpx;
			position: absolute;
			right: 23rpx;
			top: 40rpx;
			z-index: 2;
		}

		.close {
			width: 64rpx;
			height: 64rpx;
			background: #BFBFBF;
			border-radius: 50%;
			line-height: 64rpx;
			text-align: center;
			font-size: 40rpx;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 2;
		}
	}

	.reminder-box {
		width: 626rpx;
		box-sizing: border-box;
		padding: 114rpx 56rpx 72rpx;
		background: #FFFFFF;
		border-radius: 80rpx;
		position: relative;
		z-index: 2;

		&::before {
			content: "";
			border-radius: 80rpx;
			display: block;
			box-sizing: border-box;
			width: 100%;
			height: 200rpx;
			background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/empty/tc-bg.png');
			background-size: 100% 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: -1;
		}

		.title {
			font-size: 40rpx;
			font-weight: 900;
			color: #282D2D;
			line-height: 56rpx;
			margin-bottom: 38rpx;
		}

		.value {
			font-size: 28rpx;
			font-weight: 400;
			color: #282D2D;
			line-height: 44rpx;
			margin-bottom: 66rpx;

			&.value2 {
				margin-top: -66rpx;
			}
		}
	}
</style>